<template>
  <view class="create-container">
    <!-- 顶部导航 -->
    <view class="create-header">
      <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
      <text class="header-title">发布内容</text>
      <text class="publish-btn" @click="publishContent">发布</text>
    </view>
    
    <!-- 内容编辑区 -->
    <view class="content-editor">
      <!-- 标题输入 -->
      <view class="title-input">
        <textarea 
          v-model="contentTitle"
          class="title-textarea"
          placeholder="输入标题（可选）"
          :maxlength="50"
          :auto-height="true"
        ></textarea>
        <text class="char-count">{{ contentTitle.length }}/50</text>
      </view>
      
      <!-- 内容输入 -->
      <view class="text-input">
        <textarea 
          v-model="contentText"
          class="content-textarea"
          placeholder="分享你的育儿心得、经验或问题..."
          :maxlength="500"
          :auto-height="true"
        ></textarea>
        <text class="char-count">{{ contentText.length }}/500</text>
      </view>
      
      <!-- 媒体内容 -->
      <view class="media-section">
        <!-- 图片列表 -->
        <view v-if="imageList.length > 0" class="image-grid">
          <view 
            v-for="(image, index) in imageList" 
            :key="index"
            class="image-item"
          >
            <image class="preview-image" :src="image" mode="aspectFill"></image>
            <view class="image-delete" @click="removeImage(index)">
              <u-icon name="close" size="16" color="white"></u-icon>
            </view>
          </view>
          <view v-if="imageList.length < 9" class="add-image" @click="chooseImages">
            <u-icon name="plus" size="30" color="#999"></u-icon>
          </view>
        </view>
        
        <!-- 视频预览 -->
        <view v-if="videoInfo" class="video-preview">
          <video 
            class="preview-video" 
            :src="videoInfo.url" 
            :poster="videoInfo.cover"
            controls
          ></video>
          <view class="video-delete" @click="removeVideo">
            <u-icon name="close" size="16" color="white"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="action-item" @click="chooseImages">
          <u-icon name="photo" size="24" color="#666"></u-icon>
          <text class="action-text">图片</text>
        </view>
        <view class="action-item" @click="chooseVideo">
          <u-icon name="video" size="24" color="#666"></u-icon>
          <text class="action-text">视频</text>
        </view>
        <view class="action-item" @click="addTopic">
          <u-icon name="tags" size="24" color="#666"></u-icon>
          <text class="action-text">话题</text>
        </view>
        <view class="action-item" @click="addLocation">
          <u-icon name="map" size="24" color="#666"></u-icon>
          <text class="action-text">位置</text>
        </view>
      </view>
      
      <!-- 话题标签 -->
      <view v-if="selectedTopics.length > 0" class="topic-tags">
        <text class="topic-label">话题：</text>
        <view 
          v-for="(topic, index) in selectedTopics" 
          :key="index"
          class="topic-tag"
        >
          <text class="topic-text">#{{ topic.name }}</text>
          <u-icon name="close" size="12" color="#007aff" @click="removeTopic(index)"></u-icon>
        </view>
      </view>
      
      <!-- 位置信息 -->
      <view v-if="locationInfo" class="location-info">
        <u-icon name="map" size="16" color="#666"></u-icon>
        <text class="location-text">{{ locationInfo.name }}</text>
        <u-icon name="close" size="12" color="#999" @click="removeLocation"></u-icon>
      </view>
    </view>
    
    <!-- 发布设置 -->
    <view class="publish-settings">
      <view class="setting-item">
        <text class="setting-label">谁可以看</text>
        <view class="setting-value" @click="showVisibilityOptions">
          <text class="value-text">{{ visibilityText }}</text>
          <u-icon name="arrow-right" size="16" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="setting-item">
        <text class="setting-label">允许评论</text>
        <u-switch v-model="allowComments" size="small"></u-switch>
      </view>
    </view>
    
    <!-- 话题选择弹窗 -->
    <u-popup 
      v-model="showTopicSelector" 
      mode="bottom" 
      height="60%"
      border-radius="20"
      closeable
    >
      <view class="topic-selector">
        <view class="selector-header">
          <text class="selector-title">选择话题</text>
        </view>
        
        <!-- 搜索框 -->
        <view class="topic-search">
          <input 
            class="search-input" 
            v-model="topicSearchText" 
            placeholder="搜索话题或创建新话题"
            @input="searchTopics"
          />
        </view>
        
        <!-- 热门话题 -->
        <view class="hot-topics">
          <text class="section-title">热门话题</text>
          <view class="topic-list">
            <view 
              v-for="(topic, index) in hotTopics" 
              :key="topic.id"
              class="topic-item"
              :class="{ selected: isTopicSelected(topic.id) }"
              @click="toggleTopic(topic)"
            >
              <text class="topic-name">#{{ topic.name }}</text>
              <text class="topic-count">{{ topic.postCount }}条内容</text>
            </view>
          </view>
        </view>
        
        <!-- 搜索结果 -->
        <view v-if="topicSearchText" class="search-results">
          <text class="section-title">搜索结果</text>
          <view class="topic-list">
            <view 
              v-for="(topic, index) in searchResults" 
              :key="topic.id"
              class="topic-item"
              :class="{ selected: isTopicSelected(topic.id) }"
              @click="toggleTopic(topic)"
            >
              <text class="topic-name">#{{ topic.name }}</text>
              <text class="topic-count">{{ topic.postCount }}条内容</text>
            </view>
            
            <!-- 创建新话题 -->
            <view 
              v-if="canCreateTopic" 
              class="topic-item create-topic"
              @click="createNewTopic"
            >
              <text class="topic-name">#{{ topicSearchText }}</text>
              <text class="create-text">创建新话题</text>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 可见性选择弹窗 -->
    <u-popup 
      v-model="showVisibility" 
      mode="bottom" 
      height="auto"
      border-radius="20"
      closeable
    >
      <view class="visibility-selector">
        <view class="selector-header">
          <text class="selector-title">谁可以看</text>
        </view>
        <view class="visibility-options">
          <view 
            v-for="(option, index) in visibilityOptions" 
            :key="index"
            class="visibility-option"
            :class="{ active: visibility === option.value }"
            @click="selectVisibility(option.value)"
          >
            <view class="option-info">
              <text class="option-title">{{ option.title }}</text>
              <text class="option-desc">{{ option.description }}</text>
            </view>
            <u-icon v-if="visibility === option.value" name="checkmark" size="16" color="#1890ff"></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
    
    <!-- 发布确认弹窗 -->
    <u-popup 
      v-model="showPublishConfirm" 
      mode="center" 
      width="80%"
      border-radius="20"
      closeable
    >
      <view class="publish-confirm">
        <view class="confirm-header">
          <text class="confirm-title">确认发布</text>
        </view>
        <view class="confirm-content">
          <text class="confirm-text">内容发布后将无法修改，确定要发布吗？</text>
        </view>
        <view class="confirm-actions">
          <button class="action-btn secondary" @click="showPublishConfirm = false">取消</button>
          <button class="action-btn primary" @click="confirmPublish">确定发布</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { get, post, uploadFile } from '@/utils/request';

// 话题接口
interface Topic {
  id: string;
  name: string;
  postCount?: number;
}

// 可见性选项接口
interface VisibilityOption {
  value: 'public' | 'friends' | 'private';
  title: string;
  description: string;
}

// 位置接口
interface Location {
  id: string;
  name: string;
  latitude: number;
  longitude: number;
}

// 视频信息接口
interface VideoInfo {
  url: string;
  cover: string;
  duration: number;
}

@Component
export default class CreatePage extends Vue {
  // 数据属性
  contentTitle: string = '';
  contentText: string = '';
  imageList: string[] = [];
  videoInfo: VideoInfo | null = null;
  selectedTopics: Topic[] = [];
  locationInfo: Location | null = null;
  
  // 发布设置
  visibility: 'public' | 'friends' | 'private' = 'public';
  allowComments: boolean = true;
  
  // 上传状态
  uploading: boolean = false;
  
  // 弹窗状态
  showTopicSelector: boolean = false;
  showVisibility: boolean = false;
  showPublishConfirm: boolean = false;
  
  // 话题相关
  topicSearchText: string = '';
  hotTopics: Topic[] = [];
  searchResults: Topic[] = [];
  
  // 可见性选项
  visibilityOptions: VisibilityOption[] = [
    {
      value: 'public',
      title: '所有人可见',
      description: '任何人都可以看到这条内容'
    },
    {
      value: 'friends',
      title: '仅好友可见',
      description: '只有你的好友可以看到'
    },
    {
      value: 'private',
      title: '仅自己可见',
      description: '只有你自己可以看到'
    }
  ];
  
  // 计算属性
  get visibilityText(): string {
    const textMap = {
      'public': '所有人可见',
      'friends': '仅好友可见',
      'private': '仅自己可见'
    };
    return textMap[this.visibility];
  }
  
  get canPublish(): boolean {
    return (this.contentText.trim().length > 0 || this.imageList.length > 0 || !!this.videoInfo) && !this.uploading;
  }
  
  get canCreateTopic(): boolean {
    return this.topicSearchText.trim().length > 0 && 
           !this.searchResults.some(topic => topic.name.toLowerCase() === this.topicSearchText.toLowerCase());
  }
  
  // 生命周期
  onLoad() {
    // 检查登录状态
    const token = uni.getStorageSync('token');
    const isGuest = uni.getStorageSync('isGuest');
    
    if (!token && !isGuest) {
      uni.showModal({
        title: '提示',
        content: '请先登录后再发布内容',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          } else {
            uni.navigateBack();
          }
        }
      });
      return;
    }
    
    if (isGuest) {
      uni.showModal({
        title: '提示',
        content: '游客模式无法发布内容，请先登录',
        showCancel: false,
        success: () => {
          uni.navigateBack();
        }
      });
      return;
    }
  }
  
  // 方法
  
  /**
   * 返回上一页
   */
  goBack() {
    if (this.hasContent()) {
      uni.showModal({
        title: '确认离开',
        content: '当前内容尚未发布，确定要离开吗？',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          }
        }
      });
    } else {
      uni.navigateBack();
    }
  }
  
  /**
   * 检查是否有内容
   */
  hasContent(): boolean {
    return this.contentTitle.trim().length > 0 || 
           this.contentText.trim().length > 0 || 
           this.imageList.length > 0 || 
           this.videoInfo !== null;
  }
  
  /**
   * 选择图片
   */
  chooseImages() {
    const remainingCount = 9 - this.imageList.length;
    if (remainingCount <= 0) {
      uni.showToast({
        title: '最多只能选择9张图片',
        icon: 'none'
      });
      return;
    }
    
    uni.chooseImage({
      count: remainingCount,
      sizeType: ['compressed'],
      sourceType: ['camera', 'album'],
      success: (res) => {
        this.uploadImages(Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths]);
      },
      fail: (error) => {
        console.error('选择图片失败:', error);
      }
    });
  }
  
  /**
   * 上传图片
   */
  async uploadImages(filePaths: string[]) {
    uni.showLoading({ title: '上传中...' });
    
    try {
      for (const filePath of filePaths) {
        // 这里应该调用上传接口
        // const uploadResult = await uploadFile('/upload/image', filePath);
        // this.imageList.push(uploadResult.data.url);
        
        // 模拟上传成功
        this.imageList.push(filePath);
      }
      
      uni.showToast({
        title: '上传成功',
        icon: 'success'
      });
    } catch (error) {
      console.error('上传图片失败:', error);
      uni.showToast({
        title: '上传失败',
        icon: 'none'
      });
    } finally {
      uni.hideLoading();
    }
  }
  
  /**
   * 移除图片
   */
  removeImage(index: number) {
    this.imageList.splice(index, 1);
  }
  
  /**
   * 选择视频
   */
  chooseVideo() {
    if (this.videoInfo) {
      uni.showModal({
        title: '提示',
        content: '只能上传一个视频，是否替换当前视频？',
        success: (res) => {
          if (res.confirm) {
            this.selectVideo();
          }
        }
      });
    } else {
      this.selectVideo();
    }
  }
  
  /**
   * 选择视频文件
   */
  selectVideo() {
    uni.chooseVideo({
      sourceType: ['camera', 'album'],
      maxDuration: 60,
      success: (res) => {
        this.uploadVideo(res.tempFilePath);
      },
      fail: (error) => {
        console.error('选择视频失败:', error);
      }
    });
  }
  
  /**
   * 上传视频
   */
  async uploadVideo(filePath: string) {
    uni.showLoading({ title: '上传中...' });
    
    try {
      // 这里应该调用上传接口
      // const uploadResult = await uploadFile('/upload/video', filePath);
      
      // 模拟上传成功
      this.videoInfo = {
        url: filePath,
        cover: filePath + '?vframe/jpg/offset/1',
        duration: 30
      };
      
      // 如果选择了视频，清空图片
      this.imageList = [];
      
      uni.showToast({
        title: '上传成功',
        icon: 'success'
      });
    } catch (error) {
      console.error('上传视频失败:', error);
      uni.showToast({
        title: '上传失败',
        icon: 'none'
      });
    } finally {
      uni.hideLoading();
    }
  }
  
  /**
   * 移除视频
   */
  removeVideo() {
    this.videoInfo = null;
  }
  
  /**
   * 添加话题
   */
  addTopic() {
    this.showTopicSelector = true;
    this.loadHotTopics();
  }
  
  /**
   * 加载热门话题
   */
  async loadHotTopics() {
    if (this.hotTopics.length > 0) return;
    
    try {
      const response = await get('/community/hot-topics', {
        limit: 20
      });
      
      this.hotTopics = response.data.topics || [];
    } catch (error) {
      console.error('加载热门话题失败:', error);
      // 使用模拟数据
      this.hotTopics = this.getMockTopics();
    }
  }
  
  /**
   * 搜索话题
   */
  async searchTopics() {
    if (!this.topicSearchText.trim()) {
      this.searchResults = [];
      return;
    }
    
    try {
      const response = await get('/community/topics/search', {
        keyword: this.topicSearchText.trim(),
        limit: 10
      });
      
      this.searchResults = response.data.topics || [];
    } catch (error) {
      console.error('搜索话题失败:', error);
      // 模拟搜索结果
      this.searchResults = this.hotTopics.filter(topic => 
        topic.name.toLowerCase().includes(this.topicSearchText.toLowerCase())
      );
    }
  }
  
  /**
   * 检查话题是否已选择
   */
  isTopicSelected(topicId: string): boolean {
    return this.selectedTopics.some(topic => topic.id === topicId);
  }
  
  /**
   * 切换话题选择
   */
  toggleTopic(topic: Topic) {
    const index = this.selectedTopics.findIndex(t => t.id === topic.id);
    if (index > -1) {
      this.selectedTopics.splice(index, 1);
    } else {
      if (this.selectedTopics.length >= 5) {
        uni.showToast({
          title: '最多只能选择5个话题',
          icon: 'none'
        });
        return;
      }
      this.selectedTopics.push(topic);
    }
  }
  
  /**
   * 创建新话题
   */
  async createNewTopic() {
    const topicName = this.topicSearchText.trim();
    if (!topicName) return;
    
    try {
      const response = await post('/community/topics', {
        name: topicName
      });
      
      const newTopic: Topic = {
        id: response.data.id || Date.now().toString(),
        name: topicName,
        postCount: 0
      };
      
      this.selectedTopics.push(newTopic);
      this.topicSearchText = '';
      this.searchResults = [];
      
      uni.showToast({
        title: '话题创建成功',
        icon: 'success'
      });
    } catch (error) {
      console.error('创建话题失败:', error);
      // 模拟创建成功
      const newTopic: Topic = {
        id: Date.now().toString(),
        name: topicName,
        postCount: 0
      };
      
      this.selectedTopics.push(newTopic);
      this.topicSearchText = '';
      this.searchResults = [];
      
      uni.showToast({
        title: '话题创建成功',
        icon: 'success'
      });
    }
  }
  
  /**
   * 移除话题
   */
  removeTopic(index: number) {
    this.selectedTopics.splice(index, 1);
  }
  
  /**
   * 获取模拟话题数据
   */
  getMockTopics(): Topic[] {
    return [
      { id: '1', name: '新手妈妈', postCount: 1250 },
      { id: '2', name: '辅食添加', postCount: 890 },
      { id: '3', name: '睡眠训练', postCount: 567 },
      { id: '4', name: '疫苗接种', postCount: 432 },
      { id: '5', name: '早教启蒙', postCount: 678 }
    ];
  }
  
  /**
   * 添加位置
   */
  addLocation() {
    uni.chooseLocation({
      success: (res) => {
        this.locationInfo = {
          id: Date.now().toString(),
          name: res.name,
          latitude: res.latitude,
          longitude: res.longitude
        };
      },
      fail: (error) => {
        console.error('选择位置失败:', error);
      }
    });
  }
  
  /**
   * 移除位置
   */
  removeLocation() {
    this.locationInfo = null;
  }
  
  /**
   * 显示可见性选项
   */
  showVisibilityOptions() {
    this.showVisibility = true;
  }
  
  /**
   * 选择可见性
   */
  selectVisibility(value: 'public' | 'friends' | 'private') {
    this.visibility = value;
    this.showVisibility = false;
  }
  
  /**
   * 发布内容
   */
  async publishContent() {
    if (!this.canPublish) {
      uni.showToast({
        title: '请输入内容或添加图片/视频',
        icon: 'none'
      });
      return;
    }
    
    this.showPublishConfirm = true;
  }
  
  /**
   * 确认发布
   */
  async confirmPublish() {
    this.showPublishConfirm = false;
    this.uploading = true;
    
    uni.showLoading({ title: '发布中...' });
    
    try {
      const postData = {
        title: this.contentTitle.trim(),
        content: this.contentText.trim(),
        images: this.imageList,
        video: this.videoInfo,
        topics: this.selectedTopics.map(topic => topic.id),
        location: this.locationInfo,
        visibility: this.visibility,
        allowComments: this.allowComments
      };
      
      const response = await post('/community/posts', postData);
      
      uni.hideLoading();
      uni.showToast({
        title: '发布成功',
        icon: 'success'
      });
      
      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      
    } catch (error) {
      console.error('发布失败:', error);
      uni.hideLoading();
      uni.showToast({
        title: '发布失败，请重试',
        icon: 'none'
      });
    } finally {
      this.uploading = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.create-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.create-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 1rpx solid #f0f0f0;
  
  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .publish-btn {
    font-size: 28rpx;
    color: #007aff;
    font-weight: 500;
  }
}

.content-editor {
  background-color: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.title-input {
  position: relative;
  margin-bottom: 30rpx;
  
  .title-textarea {
    width: 100%;
    min-height: 80rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    border: none;
    outline: none;
    resize: none;
  }
  
  .char-count {
    position: absolute;
    bottom: 10rpx;
    right: 0;
    font-size: 24rpx;
    color: #999;
  }
}

.text-input {
  position: relative;
  margin-bottom: 30rpx;
  
  .content-textarea {
    width: 100%;
    min-height: 200rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    border: none;
    outline: none;
    resize: none;
  }
  
  .char-count {
    position: absolute;
    bottom: 10rpx;
    right: 0;
    font-size: 24rpx;
    color: #999;
  }
}

.media-section {
  margin-bottom: 30rpx;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15rpx;
  
  .image-item {
    position: relative;
    aspect-ratio: 1;
    
    .preview-image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
    
    .image-delete {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 32rpx;
      height: 32rpx;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .add-image {
    aspect-ratio: 1;
    border: 2rpx dashed #d0d0d0;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
  }
}

.video-preview {
  position: relative;
  
  .preview-video {
    width: 100%;
    height: 400rpx;
    border-radius: 12rpx;
  }
  
  .video-delete {
    position: absolute;
    top: 15rpx;
    right: 15rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  border-top: 1rpx solid #f0f0f0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 30rpx;
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .action-text {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}

.topic-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
  
  .topic-label {
    font-size: 26rpx;
    color: #666;
    margin-right: 15rpx;
  }
  
  .topic-tag {
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    background-color: #f0f8ff;
    border-radius: 16rpx;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
    
    .topic-text {
      font-size: 24rpx;
      color: #007aff;
      margin-right: 8rpx;
    }
  }
}

.location-info {
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  
  .location-text {
    flex: 1;
    margin: 0 15rpx;
    font-size: 26rpx;
    color: #333;
  }
}

.publish-settings {
  background-color: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 0 30rpx;
  
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .setting-label {
      font-size: 28rpx;
      color: #333;
    }
    
    .setting-value {
      display: flex;
      align-items: center;
      
      .value-text {
        font-size: 26rpx;
        color: #666;
        margin-right: 10rpx;
      }
    }
  }
}

// 话题选择弹窗
.topic-selector {
  background-color: #fff;
  
  .selector-header {
    text-align: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .selector-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .topic-search {
    padding: 30rpx;
    
    .search-input {
      width: 100%;
      height: 70rpx;
      padding: 0 20rpx;
      border: 1rpx solid #d9d9d9;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
  }
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
  }
  
  .topic-list {
    max-height: 400rpx;
    overflow-y: auto;
    
    .topic-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 30rpx;
      border-bottom: 1rpx solid #f8f9fa;
      
      &.selected {
        background-color: #f0f8ff;
        
        .topic-name {
          color: #1890ff;
        }
      }
      
      &.create-topic {
        background-color: #f6ffed;
        
        .topic-name {
          color: #52c41a;
        }
        
        .create-text {
          font-size: 24rpx;
          color: #52c41a;
        }
      }
      
      .topic-name {
        font-size: 28rpx;
        color: #333;
      }
      
      .topic-count {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

// 可见性选择弹窗
.visibility-selector {
  background-color: #fff;
  
  .visibility-options {
    padding: 0 30rpx 30rpx;
    
    .visibility-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f8f9fa;
      
      &:last-child {
        border-bottom: none;
      }
      
      .option-info {
        flex: 1;
        
        .option-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .option-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      &.active {
        .option-title {
          color: #1890ff;
        }
      }
    }
  }
}

// 发布确认弹窗
.publish-confirm {
  padding: 40rpx;
  background-color: #fff;
  
  .confirm-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .confirm-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .confirm-content {
    text-align: center;
    margin-bottom: 40rpx;
    
    .confirm-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }
  
  .confirm-actions {
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      border: none;
      
      &.secondary {
        background-color: #f8f9fa;
        color: #666;
      }
      
      &.primary {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
}
</style>